<template>
  <div class="avatar-upload">
    <ImageUpload
      v-model="avatarUrl"
      category="avatar"
      :placeholder="placeholder"
      :accept="['image/jpeg', 'image/png']"
      :max-size="1"
      :fit="fit"
      :class="['avatar-uploader', sizeClass]"
      @success="handleSuccess"
      @error="handleError"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import ImageUpload from './ImageUpload.vue'

// Props
const props = defineProps({
  // 头像URL
  modelValue: {
    type: String,
    default: ''
  },
  // 尺寸大小
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  // 占位符文本
  placeholder: {
    type: String,
    default: '点击上传头像'
  },
  // 图片显示模式
  fit: {
    type: String,
    default: 'contain',
    validator: (value) => ['contain', 'cover'].includes(value)
  }
})

// Emits
const emit = defineEmits(['update:modelValue', 'success', 'error'])

// 计算属性
const avatarUrl = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const sizeClass = computed(() => {
  return `size-${props.size} avatar`
})

// 事件处理
const handleSuccess = (fileInfo) => {
  emit('success', fileInfo)
}

const handleError = (error) => {
  emit('error', error)
}
</script>

<style scoped>
.avatar-upload {
  display: inline-block;
}

.avatar-uploader {
  border-radius: 50% !important;
}

.avatar-uploader :deep(.uploaded-image) {
  border-radius: 50%;
}

.avatar-uploader :deep(.image-uploader) {
  border-radius: 50%;
}

.avatar-uploader :deep(.image-preview) {
  border-radius: 50%;
  background-color: #f5f7fa;
}

.avatar-uploader :deep(.image-loading),
.avatar-uploader :deep(.image-error) {
  border-radius: 50%;
}

.avatar-uploader :deep(.image-overlay) {
  border-radius: 50%;
}

.avatar-uploader :deep(.action-button) {
  width: 28px;
  height: 28px;
}

.avatar-uploader :deep(.action-button .el-icon) {
  font-size: 14px;
}

/* 小尺寸头像的按钮更小 */
.avatar-uploader.size-small :deep(.action-button) {
  width: 24px;
  height: 24px;
}

.avatar-uploader.size-small :deep(.action-button .el-icon) {
  font-size: 12px;
}

/* 不同尺寸 */
.avatar-uploader.size-small :deep(.image-uploader) {
  width: 80px;
  height: 80px;
}

.avatar-uploader.size-medium :deep(.image-uploader) {
  width: 100px;
  height: 100px;
}

.avatar-uploader.size-large :deep(.image-uploader) {
  width: 140px;
  height: 140px;
}

.avatar-uploader.size-small :deep(.upload-placeholder) {
  min-height: 80px;
  padding: 10px;
}

.avatar-uploader.size-medium :deep(.upload-placeholder) {
  min-height: 100px;
  padding: 15px;
}

.avatar-uploader.size-large :deep(.upload-placeholder) {
  min-height: 140px;
  padding: 20px;
}

.avatar-uploader.size-small :deep(.upload-icon) {
  font-size: 20px;
}

.avatar-uploader.size-medium :deep(.upload-icon) {
  font-size: 24px;
}

.avatar-uploader.size-large :deep(.upload-icon) {
  font-size: 32px;
}

.avatar-uploader.size-small :deep(.upload-text) {
  font-size: 12px;
}

.avatar-uploader.size-medium :deep(.upload-text) {
  font-size: 13px;
}

.avatar-uploader.size-large :deep(.upload-text) {
  font-size: 14px;
}
</style>
